<script setup>


import ListApis from "@/apis/list.js";
import {useRouter, useRoute} from "vue-router";
import config from "@/config/index.js";
import RightIcon from "@/components/common/RightIcon.vue";
import useUserStore from '@/stores/user.js'
import useCookieStore from '@/stores/cookieStorage.js'
import MaterialApis from "@/apis/material.js";
import {ElMessage, ElMessageBox} from "element-plus";
import PaperApis from '@/apis/paper.js'
import CommonModeSelect from "@/components/common/CommonModeSelect.vue";
import QuestionApis from "@/apis/question.js";
import {encrypt} from '@/utils/jsencrypt.js'
import useLocalStore from "@/stores/local.js";
import PackageApis from "@/apis/package.js";


const localStore = useLocalStore();
const elTreeKey = ref(0)
const router = useRouter()
const route = useRoute()
const industriesAndExams = ref([])
const industries = ['jiangonglei', 'caikuailei', 'zhicheng']
const activeIndex = ref(0)
const userStore = useUserStore();
const cookieStore = useCookieStore();
const columnType = ['chapterPractice', 'paperLibrary', 'specialPractice', 'randomFormPaper', 'video', 'materialInfo']
const freeGrade = [{
  name: '免费'
}, {
  name: '付费班级独享'
}]
const gradeActiveIndex = ref(0)
const activeIndex1 = ref(0)
// const items1 = ['最新', '推荐', '我可下载的资料']
const items1 = ['最新']
const rightTags = ref(['每周排行', '错题排行', '收藏排行'])
const select1 = ref(null)
const options1 = ref([])
const isLogin = computed(() => {
  return cookieStore.isLogin;
})
const dialogVisible = ref(false)
const paperList = ref([])
const paperDialog = ref(null)
const selectPaper = ref(null)
const randomPaper = ref(null)
const specialPaper = ref(null)
const weekRankData = ref([])
const errorRankData = ref([])
const collectRankData = ref([])

const hotInformation = ref([])
const columnLoading = ref(false)
const rankOptions = ref([{
  label: '每周',
  value: 0
}, {
  label: '错题',
  value: 1
}, {
  label: '收藏',
  value: 2
}])
// 在必要数据获取完成后，才能进行排行榜切换
const disableSelect = ref(true)
const currentRank = ref(0)
// chapter  paperRecordRandomFormPaper
const recordsType = ref('chapter')
const randomPaperDetail = ref(null)
const haveInitialized = ref(false)
const packageList = ref([])
const drawer1=ref(false)
const currentCategory = computed(() => {

  if (industriesAndExams.value.length && industriesAndExams.value[activeIndex.value].children && industriesAndExams.value[activeIndex.value].children.length && industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex] && industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children) {

    return industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex]
  }
})
const currentColumn = computed(() => {
  if (industriesAndExams.value.length && industriesAndExams.value[activeIndex.value].children.length && industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children.length) {
    return industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].activeIndex]
  }
})


async function init() {
  columnLoading.value = true
  const industryRes = await getIndustries();
  industriesAndExams.value = industryRes.data.filter(item => industries.includes(item.id));
  if (industriesAndExams.value.length) {
    if (!route.query.examId) {
      getExams(industriesAndExams.value[0].id).then(res => {


        industriesAndExams.value[0].children = res.data
        industriesAndExams.value[0].activeIndex = 0
        getHotInformation()
        if (!res.data.length) {
          haveInitialized.value = true
          return;
        }
        //  获取科目
        ListApis.leafListPc({
          params: {
            examId: res.data[0].id,
          }
        }).then(res1 => {
          industriesAndExams.value[0].children[0].activeIndex = 0
          industriesAndExams.value[0].children[0].children = res1.data
          if (!res1.data.length) {
            haveInitialized.value = true
            return;
          }
          ListApis.columnByCategory({
            params: {
              categoryId: res1.data[0].id,
              columnPosition: 'JGQY',
              type: 1,
            }
          }).then(res2 => {
            industriesAndExams.value[0].children[0].children[0].activeIndex = 0
            industriesAndExams.value[0].children[0].children[0].children = res2.data
            getDataListAfterColumn()
            columnLoading.value = false
            haveInitialized.value = true
          })
        })
      })
    } else {

      let industryIndex;
      const item = industriesAndExams.value.find((item, index) => {
        if (item.id == route.query.industryId) {
          industryIndex = index;
          return true;
        }
      })

      activeIndex.value = industryIndex
      getExams(item.id).then(res => {


        industriesAndExams.value[industryIndex].children = res.data
        industriesAndExams.value[industryIndex].activeIndex = res.data.findIndex(e => {
          return e.id == route.query.examId;
        })
        getHotInformation()
        if (!res.data.length) {
           haveInitialized.value = true
          return;
        }
        //  获取科目
        ListApis.leafListPc({
          params: {
            examId: res.data[industriesAndExams.value[industryIndex].activeIndex].id,
          }
        }).then(res1 => {
          industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].activeIndex = 0
          industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children = res1.data
          if (!res1.data.length) {
            haveInitialized.value = true
            return;
          }
          ListApis.columnByCategory({
            params: {
              categoryId: res1.data[0].id,
              columnPosition: 'JGQY',
              type: 1,
            }
          }).then(res2 => {
            industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children[0].activeIndex = 0
            industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children[0].children = res2.data
            getDataListAfterColumn()
            columnLoading.value = false
            haveInitialized.value = true
          })
        })
      })
    }
  }
}
function activeColumn() {
  packageList.value = []
//   应该是包含该栏目的套餐，
  PackageApis.getPackagesWithColumn({
    examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
    categoryId: currentCategory.value.id,
    columnId: currentColumn.value.id
  }).then(res => {
    res.data.forEach((item1, index) => {
      item1.cover = item1.cover || '/测试用的图片/2.jpg'
    })
    packageList.value = res.data;
    drawer1.value = true
  })
}
function goToPackage(item1) {
  router.push({
    path: '/buyCenter/package/index',
    query: {
      packageId: item1.id,
      industryId: industriesAndExams.value[activeIndex.value].id,
      examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
      ...item1
    }
  })

}
function getDataListAfterColumn() {
//   当前激活的栏目类型
//   ---------------------------行业----------------------------------------------------------------考试------------------------------------------------------------------------------------------------------------------------------------科目
  const currentColumn = industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].activeIndex]
  switch (currentColumn.type) {
    case columnType[0]:
      //
      break;
    case columnType[1]:
      getPaperList()
      break;
    case columnType[2]:
      getSpecialList();
      break;
    case columnType[3]:
      getRandomRecords()
      break;
    case columnType[4]:
      break;
    case columnType[5]:
      break;
  }
}

function getSpecialList() {
  // console.log('获取专栏列表')
  PaperApis.generateSpecialRecords({
    industryCode: '',
    examId: '',
    categoryId: '',
    examName: '',
    categoryName: '',
    columnId: '',
    chapterIds: [],
    count: 1,
    result: false,
    types: [{
      typeId: '',
      count: 1,
      type: 'singleChoice',
      name: ''
    }]
  }).then(res => {
    nextTick(() => {
      //   设置随机试卷
      //   randomPaper.value
      specialPaper.value.setDetail(res.data)
    })
  })
}

function getRandomRecords() {
  randomPaperDetail.value = null
  recordsType.value = 'paperRecordRandomFormPaper'
  PaperApis.generateRandomRecords(encrypt(JSON.stringify({
    columnId: currentColumn.value.id,
    categoryId: currentCategory.value.id
  })), {
    headers: {
      'encryption-type': 'rsa',
      'content-type': 'application/json; charset=UTF-8'
    }
  }).then(res => {
    // const response = {
    //   industryCode: 'jiangonglei',
    //   examId: '34',
    //   categoryId: 108,
    //   columnId: '1899377667426836480',
    //   result: true,
    //   params: {
    //     categoryId: 108,
    //     columnId: '1899377667426836480',
    //   },
    //   // encode,
    //   encryptStr:'ayX9A4kNtk9qQFzPIKpdW8Vt9mvX53UGKgoYlJ3L6r/zlmRtAjZFuRKxwu0UT5qXrbwdtWnjLYP0W3F3bf7AwZ19UpAZO40px1C8TOm8oGkwQyj5V5LdeG8LYhIGkzorQR8ecvGCbwNKVSUCfP+8Vhmch9/5OAQC5nVH4J2XTYJLfHB/vDh/lePLUO7WV1RJCKUHuA27qe7trI8ZDNfRw1SHrKC7KTBMly5R48to6zZiTnuNTKiXM84rK9iLwjoeOHatw3md/WrlhCqW0O10kFHpFJGbdrNymDhxpny9l+GtPxlxpPw2w6G/1XZUBL4vYFHMJSVSmZG1J9o8KG/L0A==',
    //   qcount:100,
    //   haveFinish:false,
    //   remark:'单选70题，每题一分，多选30题，每题两分',
    //   type:'paper',
    //   content:[],
    //   recordsType:'paperRecordRandomFormPaper',
    //   allScore:130.0,
    //   id:'1917087838638850048',
    //   paperId:'1899014712382283776',
    //   userId:'1881630540189143040',
    //   passScore:78.0,
    //   name:'随机组卷20250429-3'
    // }
    nextTick(() => {
      //   设置随机试卷
      //   randomPaper.value
      // randomPaper.value.setDetail(res.data)
      randomPaperDetail.value = res.data
      randomPaper.value.setDetail(res.data)
      localStore.setRandomQuestion(res.data)
    })
  })
}

function getExams(industryId) {
  return ListApis.examByIndustry({
    params: {
      size: 1000,
      industryId,
    },
  })
}

function getIndustries() {
  return ListApis.industryList()
}

function goToPaper(item) {
  dialogVisible.value = true
  selectPaper.value = item
}

function downloadPaper(item) {
  PaperApis.exportPaper({
    params: {
      paperRecordsId: '',
      paperId: item.id
    }
  }).then(res => {
    var htmlAnchorElement = document.createElement('a');
    htmlAnchorElement.href = res.data
    const str = res.data.split('/')[res.data.split('/').length - 1]
    htmlAnchorElement.download = str.substring(0, str.indexOf('?'))
    document.body.appendChild(htmlAnchorElement)
    htmlAnchorElement.click()
    htmlAnchorElement.remove()
  })
}

function goPracticeMode() {
  router.push({
    path: '/questionBank/paper/PracticeMode',
    query: {
      id: selectPaper.value.id,
      columnId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].activeIndex].id,
      name: selectPaper.value.name,
      industryCode: industriesAndExams.value[activeIndex.value].id,
      examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
      categoryId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].id,
    }
  })
}

function goExamMode() {
  // 是否处于在考状态
  if (selectPaper.value.recordId) {
    return ElMessageBox.confirm('您已参加过考试，是否继续之前的考试？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '重新考试',
      type: 'warning',
      showClose: false
    }).then(() => {
      router.push({
        path: '/questionBank/paper/ExamMode',
        query: {
          id: selectPaper.value.id,
          name: selectPaper.value.name,
          industryCode: industriesAndExams.value[activeIndex.value].id,
          examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
          categoryId: currentCategory.value.id,
          columnId: currentColumn.value.id,


          recordId: selectPaper.value.recordId,
          examTime: selectPaper.value.examTime,
          qcount: selectPaper.value.qcount,
        }
      })
    }).catch(_ => {
      // cancel

      router.push({
        path: '/questionBank/paper/ExamMode',
        query: {
          id: selectPaper.value.id,
          name: selectPaper.value.name,
          industryCode: industriesAndExams.value[activeIndex.value].id,
          examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
          categoryId: currentCategory.value.id,
          columnId: currentColumn.value.id
        }
      })
    })
  }
  router.push({
    path: '/questionBank/paper/ExamMode',
    query: {
      id: selectPaper.value.id,
      name: selectPaper.value.name,
      industryCode: industriesAndExams.value[activeIndex.value].id,
      examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
      categoryId: currentCategory.value.id,
      columnId: currentColumn.value.id
    }
  })
}

function goToRandomPaper() {
  if (randomPaperDetail.value.qcount > 0) {
    router.push({
      path: '/questionBank/paper/RandomMode',
      query: {
        id: randomPaperDetail.value.id,
        name: randomPaperDetail.value.name,
        industryCode: industriesAndExams.value[activeIndex.value].id,
        examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
        categoryId: currentCategory.value.id,
        columnId: currentColumn.value.id,


        // haveFinish:,

        type: randomPaperDetail.value.type,
        recordsType: randomPaperDetail.value.recordsType,
        qcount: randomPaperDetail.value.qcount,
        allScore: randomPaperDetail.value.allScore,
        paperId: randomPaperDetail.value.paperId,
        passScore: randomPaperDetail.value.passScore,

        // recordId: randomPaperDetail.value.recordId,
        // examTime: randomPaperDetail.value.examTime,
      }
    })
  } else {
    ElMessage({
      message: '题目数量为0，无法组卷',
      type: 'warning'
    })
  }
}

function goToDayPractice() {
//   前往每日一练
  router.push({
    path: '/questionBank/paper/todayPractice',
    query: {
      categoryId: currentCategory.value.id,
      nameL: "",

      industryCode: industriesAndExams.value[activeIndex.value].id,
      examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
    }
  })
}
function goToLogin(){
  router.push('/login')
}
function paperDialogOpened() {
  //   获取试卷详情
  paperDialog.value.setLoading(true)
  PaperApis.detail({
    params: {
      id: selectPaper.value.id
    }
  }).then(res => {
    paperDialog.value.setDetail(res.data)
  }).finally(() => {
    paperDialog.value.setLoading(false)
  })
}

function toggleGrade(index) {
  gradeActiveIndex.value = index
//   筛选是否免费
}

function getPaperList(columnIds) {
  recordsType.value = 'paperRecordChapterPractice'
  PaperApis.paperByColumnId({
    params: {
      countDetail: true,
      columnIds: [industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].activeIndex].id],
      current: 1,
      size: 1000,
    }
  }).then(res => {
    paperList.value = res.data.records
  })
}

function toggleIndex(index) {
  if (activeIndex.value == index) return;
  activeIndex.value = index
  if (industriesAndExams.value[index].children) {
    industriesAndExams.value[index].activeIndex = 0
    getHotInformation()
    if (industriesAndExams.value[index].children.length)
      industriesAndExams.value[index].children[0].activeIndex = 0;
    if (industriesAndExams.value[index].children[0].children && industriesAndExams.value[index].children[0].children.length) {
      industriesAndExams.value[index].children[0].children[0].activeIndex = 0
      getDataListAfterColumn()
    }


    return;
  }
  columnLoading.value = true
  getExams(industriesAndExams.value[index].id).then(res => {
    industriesAndExams.value[index].children = res.data
    industriesAndExams.value[index].activeIndex = 0
    getHotInformation()
    if (!res.data.length) return;
    //  获取科目
    ListApis.leafListPc({
      params: {
        examId: res.data[0].id,
      }
    }).then(res1 => {
      industriesAndExams.value[index].children[0].activeIndex = 0
      industriesAndExams.value[index].children[0].children = res1.data
      if (!res1.data.length) return;
      ListApis.columnByCategory({
        params: {
          categoryId: res1.data[0].id,
          columnPosition: 'JGQY',
          type: 1,
        }
      }).then(res2 => {
        industriesAndExams.value[index].children[0].children[0].activeIndex = 0
        industriesAndExams.value[index].children[0].children[0].children = res2.data

        getDataListAfterColumn()
        columnLoading.value = false
      })
    })
  })
}

function toggleExam(index, item) {
  if (item.activeIndex == index) return;
  item.activeIndex = index
  getHotInformation()
  if (item.children[index].children) {
    item.children[index].activeIndex = 0
    if (item.children[index].children.length) {
      item.children[index].children[0].activeIndex = 0;
      getDataListAfterColumn()
    }

    return
  }
  ;
  columnLoading.value = true
  ListApis.leafListPc({
    params: {
      examId: item.children[index].id,
    }
  }).then(res1 => {
    // 重置科目
    item.children[index].activeIndex = 0
    item.children[index].children = res1.data
    if (!res1.data.length) return;
    // 重置栏目
    item.children[index].children[0].activeIndex = 0

    ListApis.columnByCategory({
      params: {
        categoryId: item.children[index].children[0].id,
        columnPosition: 'JGQY',
        type: 1,
      }
    }).then(res2 => {
      item.children[index].children[0].children = res2.data
      getDataListAfterColumn()
      columnLoading.value = false
    })
  })
}

function toggleCategory(index, item) {
  if (item.activeIndex == index) return;
  item.activeIndex = index
  if (item.children[index].children) {
    item.children[index].activeIndex = 0

    getDataListAfterColumn()
    return
  }
  ;
  ListApis.columnByCategory({
    params: {
      categoryId: item.children[index].id,
      columnPosition: 'JGQY',
      type: 1,
    }
  }).then(res2 => {
    item.children[index].activeIndex = 0
    item.children[index].children = res2.data
    getDataListAfterColumn()
  })
}

// 栏目类型，章节，试卷，随机，专项，资料，视频，直播
function toggleColumn(index, item) {
  if (item.activeIndex == index) return;
  item.activeIndex = index
  getDataListAfterColumn()
}

function toggleIndex1(index) {
  activeIndex1.value = index
}

function download(item, index) {
  fetch(config.prefix_image + item.attachmentInfos[0].path, {
    method: 'GET',
  })
      .then(response => response.blob())
      .then(blob => {
        // 创建一个虚拟的链接元素，模拟点击下载
        const link = document.createElement('a');
        link.style.display = 'none';
        const url = window.URL.createObjectURL(blob);
        link.href = url;
        link.download = item.attachmentInfos[0].name;
        document.body.appendChild(link);

        // // 模拟点击
        link.click();
        // // 移除虚拟链接元素
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url)


        MaterialApis.addFrequency({
          type: 'download_time',
          id: item.id
        })
      })
}

function goResource() {
// 我已购买的资料
  if (isLogin.value) {
    // router.push({
    //   path: '/mine/index',
    //   query: {
    //     index: 2
    //   }
    // })
    router.push('/mine/index?index=2')
  }
}

function getHotInformation() {
  MaterialApis.infoList({
    params: {
      type: 0,
      num: 100,
      examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id
    }
  }).then(res => {
    hotInformation.value = res.data || []
  })
}

async function loadElTree(node, resolve, reject) {
  recordsType.value = 'chapter'
  if (node.level != 0) {
    ListApis.childChapter({params: {pid: node.data.id}}).then(async res => {

      const res1 = await QuestionApis.getChapterRecordsIds({
        params: {
          categoryId: currentCategory.value.id,
          columnId: currentColumn.value.id,
          industryCode: industriesAndExams.value[activeIndex.value].id,
          recordsType: 'chapter',
          examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
          chapterIds: res.data.map(e => e.id)
        }
      })

      resolve(res.data.map(e => {
        return {
          ...e,
          doCount: res1.data[e.id].dc,
          ...res1.data[e.id],
          doPercent: Number.parseInt(res1.data[e.id].dc / e.qcount * 100) + '%'
        }
      }))
    })
  } else {
    const res = await ListApis.chapterList({
      params: {
        categoryId: currentCategory.value.id,
        columnId: currentColumn.value.id
      }
    })

    // QuestionApis.getChapterRecordsIds()   getChapterRecords
    if (res.data.length == 0) {
      return
    }

    const res1 = await QuestionApis.getChapterRecordsIds({
      params: {
        industryCode: industriesAndExams.value[activeIndex.value].id,
        examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
        categoryId: currentCategory.value.id,
        recordsType: 'chapter',
        chapterIds: res.data.map(e => e.id)
      }
    })
    let num = 0
    for (let i in res1.data) {
      num += res1.data[i].dc
    }

    resolve(res.data.map(e => {
      return {
        ...e,
        doCount: res1.data[e.id].dc,
        doPercent: Number.parseInt(res1.data[e.id].dc / e.qcount * 100) + '%'
      }
    }))
  }
}

function like(item) {
  MaterialApis.updateLike({
    id: item.id,
    type: 0,
    categoryId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].id
  }).then(res => {

    ElMessage({
      message: "点赞成功",
      type: "success"
    })
  })
}

function goToPractice(data) {
  if (data.doCount) {
    ElMessageBox.confirm('是否继续练习', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '重新开始',
      showClose: true,
      type: 'warning',
      distinguishCancelAndClose: true,
    }).then(() => {
      router.push({
        path: `/questionBank/chapterPractice/practiceMode`, query: {
          categoryId: currentCategory.value.id, columnId: currentColumn.value.id,
          chapterId: data.id,
          name: data.name,
          dc: data.dc,
          ec: data.ec,
          cc: data.cc,
        }
      })
    }).catch(_ => {

      if (_ == 'cancel') {
        router.push({
          path: `/questionBank/chapterPractice/practiceMode`, query: {
            categoryId: currentCategory.value.id, columnId: currentColumn.value.id,
            chapterId: data.id,
            name: data.name,
            restart: true
          }
        })
      }
    })
  } else {
    router.push({
      path: '/questionBank/chapterPractice/practiceMode', query: {
        categoryId: currentCategory.value.id, columnId: currentColumn.value.id,
        chapterId: data.id,
        name: data.name,
        dc: data.dc,
        ec: data.ec,
        tc: data.tc,
        cc: data.cc
      }
    })
  }
}

function getWeekRankData() {
  return QuestionApis.getWeekRank({
    params: {
      categoryId: currentCategory.value.id
    }
  }).then(res => {
    weekRankData.value = res.data.records
  })
}

function getErrorBankData() {
  QuestionApis.getCategoryRankError({
    params: {
      examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
      categoryId: currentCategory.value.id
    }

  }).then(res => {

  })
}

function rankChangeHandle(val) {
  switch (val) {
    case 0:
      getWeekRankData().finally(() => {
        disableSelect.value = false
      })
      break;
    case 1:
      getErrorBankData()
      break;
    case 2:

      break;
  }
}


init()
const stopWatchCurrentCategory = watch(currentCategory, (newVal, oldVal) => {
  if (newVal) {

    rankChangeHandle(currentRank.value)
    // stopWatchCurrentCategory()
  }

})

</script>

<template>
  <div>
    <div class="top1"></div>
    <div class="content1">
      <div class="the-left">
        <div class="the-title1">
          <span
              v-if="industriesAndExams&&industriesAndExams[activeIndex]&&industriesAndExams[activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex]">{{
              industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].name
            }}</span>
        </div>
        <div class="the-box1">
          <div class="aa">
            <div class="bb">大类</div>
            <div class="cc">
              <div @click="toggleIndex(index)" v-for="(item,index) in industriesAndExams" :key="index" class="dd"
                   :class="{active:activeIndex==index}">
                {{ item.name }}
              </div>
            </div>

          </div>
          <div class="aa">
            <div class="bb">考试</div>
            <div class="cc" v-if="industriesAndExams[activeIndex]">
              <div @click="toggleExam(index,industriesAndExams[activeIndex])"
                   v-for="(item,index) in industriesAndExams[activeIndex].children" :key="index" class="dd"
                   :class="{active:industriesAndExams[activeIndex].activeIndex==index}">
                {{ item.name }}
              </div>
            </div>

          </div>
          <div class="aa">
            <div class="bb">科目</div>
            <div class="cc"
                 v-if="industriesAndExams[activeIndex]&&industriesAndExams[activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex]">
              <div
                  @click="toggleCategory(index,industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex])"
                  v-for="(item,index) in industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children"
                  :key="index" class="dd"
                  :class="{active:industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex==index}">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="aa">
            <div class="bb">类型</div>
            <div class="cc"
                 v-if="industriesAndExams[activeIndex]&&industriesAndExams[activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex]&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex]">
              <div
                  @click="toggleColumn(index,industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex])"
                  v-for="(item,index) in industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].children"
                  :key="index" class="dd"
                  :class="{active:industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].activeIndex==index}">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="aa">
            <div class="bb">等级</div>
            <div class="cc">
              <div @click="toggleGrade(index)" v-for="(item,index) in freeGrade" :key="index" class="dd"
                   :class="{active:gradeActiveIndex==index}">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="the-title2">
          <div class="container1">
            <div class="left1">

              <span @click="toggleIndex1(index)" v-for="(item,index) in items1" :key="index" class="text1"
                    :class="{active:activeIndex1==index}">{{ item }}</span>
            </div>
            <div class="right1">
              <el-button v-if="haveInitialized&&currentColumn&&!currentColumn.soldFlag" class="activeBtn"
                         @click="activeColumn" >激活
              </el-button>
            </div>
          </div>
        </div>
        <el-scrollbar height="800">
          <div v-if="!columnLoading">
            <div class="is-paper"
                 v-if="industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].activeIndex].type==columnType[1]">
              <div class="paper-container" v-if="paperList.length">
                <div v-for="(item9,index9) in paperList" :key="index9" class="paper-container-item">
                  <div class="paper-container-item-left">
                    <div class="one">
                      <div class="one-left">
                        <img v-if="item9.free" src="@/assets/images/free_icon.jpg">
                        <span class="paperName">
                    {{ item9.name }}
                  </span>
                      </div>
                      <div class="one-right">
                    <span>
                      {{ item9.qcount }}题
                    </span>
                        <el-divider direction="vertical"/>
                        <span>
                      {{ item9.stuCount || 0 }}人做过
                    </span>

                      </div>
                    </div>
                    <div class="two">
                      <span>考试时间：{{ item9.examTime }}分钟</span>
                    </div>
                  </div>
                  <div class="paper-container-item-right" v-if="item9.free">
                    <el-button type="primary" @click="goToPaper(item9)">做题</el-button>
                    <el-button type="primary" @click="downloadPaper(item9)">下载</el-button>
                  </div>
                  <div v-else class="paper-container-item-right">
                    <el-button plain>
                      <svg t="1746607917331" class="icon" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="5797" width="20" height="20">
                        <path
                            d="M765.604952 364.063693l-42.267663 0 0-84.535325c0-116.65793-94.679359-211.337289-211.337289-211.337289s-211.337289 94.679359-211.337289 211.337289l0 84.535325-42.267663 0c-46.705742 0-84.535325 37.829584-84.535325 84.535325l0 422.674579c0 46.705742 37.829584 84.535325 84.535325 84.535325l507.209904 0c46.705742 0 84.535325-37.829584 84.535325-84.535325L850.140277 448.599018C850.140277 401.893276 812.310693 364.063693 765.604952 364.063693zM512 744.470609c-46.705742 0-84.535325-37.829584-84.535325-84.535325 0-46.705742 37.829584-84.535325 84.535325-84.535325s84.535325 37.829584 84.535325 84.535325C596.534302 706.642049 558.705742 744.470609 512 744.470609zM643.029242 364.063693 380.970758 364.063693l0-84.535325c0-72.27714 58.752102-131.029242 131.029242-131.029242S643.029242 207.251228 643.029242 279.528368L643.029242 364.063693z"
                            p-id="5798" fill="#bfbfbf"></path>
                      </svg>
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="paper-container" v-else>
                <img src="@/assets/images/empty2.png">
              </div>
            </div>
            <div class="is-chapter"
                 v-else-if="industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].activeIndex].type==columnType[0]">
              <el-tree :key="elTreeKey" :icon="RightIcon" lazy :load="loadElTree"
                       :props="{ label: 'name', isLeaf: 'leaf' }">
                <template #default="{ node, data }">
                  <div class="tree-content">
                    <div class="chapterWrap">
                      <span>{{ data.name }}</span>
                    </div>
                    <div class="chapter-2">
                      <span>正确率:</span>
                      <span>{{ data.dc ? parseInt((data.dc - data.ec) * 100 / data.dc) : 0 }}%</span>
                    </div>
                    <div class="chapter-3">
                      <span>已做/总做：</span>
                      <span>{{ data.doCount }}/{{ data.qcount }}</span>
                    </div>
                    <div class="chapter-4" v-if="data.leaf">
                      <el-button v-if="data.free" class="btn-solid" type="primary" round @click="goToPractice(data)">做题
                      </el-button>
                      <el-button v-else class="btn-solid"   plain>
                        <svg t="1746607917331" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="5797" width="20" height="20">
                          <path
                              d="M765.604952 364.063693l-42.267663 0 0-84.535325c0-116.65793-94.679359-211.337289-211.337289-211.337289s-211.337289 94.679359-211.337289 211.337289l0 84.535325-42.267663 0c-46.705742 0-84.535325 37.829584-84.535325 84.535325l0 422.674579c0 46.705742 37.829584 84.535325 84.535325 84.535325l507.209904 0c46.705742 0 84.535325-37.829584 84.535325-84.535325L850.140277 448.599018C850.140277 401.893276 812.310693 364.063693 765.604952 364.063693zM512 744.470609c-46.705742 0-84.535325-37.829584-84.535325-84.535325 0-46.705742 37.829584-84.535325 84.535325-84.535325s84.535325 37.829584 84.535325 84.535325C596.534302 706.642049 558.705742 744.470609 512 744.470609zM643.029242 364.063693 380.970758 364.063693l0-84.535325c0-72.27714 58.752102-131.029242 131.029242-131.029242S643.029242 207.251228 643.029242 279.528368L643.029242 364.063693z"
                              p-id="5798" fill="#bfbfbf"></path>
                        </svg>
                      </el-button>
                    </div>
                  </div>
                </template>
              </el-tree>
            </div>
            <div class="is-special"
                 v-else-if="industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].activeIndex].type==columnType[2]">
              <CommonModeSelect ref="specialPaper" only-exam-mode/>
              <div class="is-special-btns">
                <el-button type="primary" @click="goToSpecailPaper">开始练习</el-button>
              </div>
            </div>
            <div class="is-random"
                 v-else-if="industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].activeIndex].type==columnType[3]">
              <CommonModeSelect ref="randomPaper" only-exam-mode :recordsType="recordsType"/>
              <div class="is-random-btns"  v-if="haveInitialized&&currentColumn&&currentColumn.soldFlag">
                <el-button type="primary" @click="goToRandomPaper(data)">开始练习</el-button>
              </div>
            </div>
          </div>

        </el-scrollbar>
      </div>
      <div class="the-right">
        <div class="the-right-box1">
          <div class="the-right-box1-1">
            <span>V题库会员18 项特权</span>
            <img src="@/assets/images/vip2.png">
          </div>
          <div class="the-right-box1-2">
            <span>助教专业答疑 | 精选题 | 考前点题 | 知识点视频解析</span>
          </div>
        </div>
        <div class="the-right-box2">
          <div class="the-right-box2-left" @click="goToLogin">
            <img src="@/assets/images/person.svg" v-if="!isLogin">
            <img :src="userStore.userInfo.header" v-else>
            <span v-if="!isLogin">未登录</span>
          </div>
          <div class="the-right-box2-right" @click="goResource">
            我的题库
          </div>
        </div>

        <div class="the-right-box3">
          <div class="every-day-practice" @click="goToDayPractice">
            每日一练
          </div>
          <div>

          </div>
        </div>
        <div class="the-right-box4">
          <!--          每周，错题，收藏-->
          <div class="rank-list">
            <span>排行榜</span>

            <el-select :disabled="disableSelect" class="rank-select" v-model="currentRank" @change="rankChangeHandle">
              <el-option v-for="item in rankOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </div>
          <div>

            <div v-if="currentRank==0" class="weekRankData-container">
              <div v-for="(item,index) in weekRankData" :key="index" class="weekRankData-item">
                <span class="weekRankData-item-name">{{ item.name }}</span>
                <img class="weekRankData-item-header" :src="item.header"></img>
              </div>
            </div>
            <div v-else-if="currentRank==1"></div>
            <div v-else-if="currentRank==2">

            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="1200"
        @opened="paperDialogOpened"
    >
      <div class="paper-mode-container">
        <CommonModeSelect ref="paperDialog"/>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="goPracticeMode">练习模式</el-button>
          <el-button type="primary" @click="goExamMode">考试模式</el-button>
        </div>
      </template>
    </el-dialog>
    <el-drawer v-model="drawer1" direction="rtl" size="40%">
      <div>
        <h1>
          包含该题库的套餐
        </h1>
        <div class="package-card-container">
          <el-scrollbar height="700">
            <div v-for="(item1,index1) in packageList" :key="index1"
                 class="b radius-12">
              <div v-if="item1">
                <div class="top-left-tip">

                </div>

                <div class="top-right-tip"
                >

                </div>
                <p class="class-name">{{ item1.name }}</p>
                <p class="class-info">
                  <img :src="item1.cover">
                </p>

                <div>
                  <el-tag v-for="(item2,index2) in item1.tagNameList" :key="index2" type="primary">{{ item2 }}</el-tag>
                </div>
                <div class="price-and-btn">
                  <div><span class="unit">￥</span><span class="price">{{ item1.price / 100 }}</span></div>
                  <el-button type="primary" round @click="goToPackage(item1)">立即领取</el-button>
                </div>
              </div>
              <img v-else src="@/assets/images/empty2.png" class="empty-img">
            </div>
          </el-scrollbar>

        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped>
@media screen and (min-width: 1400px) {
  .content1{
    width: 1400px;
  }
}

.top1 {
  height: 130px;
  background: blue;
}

.content1 {
  margin: 0 auto;
  gap: 26px;
  display: flex;
}

.the-title1 {
  height: 50px;
  color: #000;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  padding: 10px 0;
  box-sizing: border-box;
}

.the-right {
  width: 345px;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.the-left {
  flex: 1;
}

.the-box1 {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-height: 330px;
}

.the-box1 .aa {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;

}

.the-box1 .aa .bb {
  width: 80px;
}

.the-box1 .aa .dd {
  padding: 2px 10px;
  cursor: pointer;
}

.the-box1 .aa .dd:hover {
  color: #409eff;
}

.the-box1 .aa .dd.active {
  border-radius: 100px;
  background: linear-gradient(180deg, #E6EFFF 0%, #FFF 100%);
  color: #409eff;
}

.the-box1 .aa .cc {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.the-title2 {
  padding: 10px 0 24px;
}

.the-title2 .container1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.the-title2 .container1 .left1 {
  display: flex;
  gap: 16px;
  align-items: center;
}

.text1 {
  color: #333;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.text1.active {
  color: #333;
  font-size: 18px;
  font-weight: 700;
}

.scroll-container1 {
  min-height: 1150px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.scroll-container1 .flex-item {
  display: flex;
  padding: 24px 24px 24px 20px;
  align-items: start;
  gap: 8px;
}

.scroll-container1 .flex-item .the-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.scroll-container1 .flex-item .the-left .the-left-text1 {
  color: #333;
  font-size: 15.75px;
  font-weight: 700;
}

.scroll-container1 .flex-item .the-left .the-left-text2 {
  color: #888;
  font-size: 12px;
  font-weight: 400;
}

.the-left-flex {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tips1 {
  color: #3C6CFF;
  font-size: 12px;
  font-weight: 400;
  border-radius: 2px;
  background: linear-gradient(180deg, #E6EFFF 0%, #FFF 100%);
  padding: 3px;
}

.tips2 {
  color: #F51E29;
  font-size: 12px;
  font-weight: 400;
}

.the-right-btn ::v-deep(.el-button) {
  --el-color-primary: #3C6CFF;
}

.the-right-btn .my-btn1 {

  width: 92px;
  height: 36px;
}

.the-right-box1 {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
  background-image: url("@/assets/images/vip1.png");
  background-size: cover;
  border-radius: 12px;
}

.the-right-box1-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  color: transparent;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(180deg, #EDBB91 10.94%, #FFCCA1 45.67%, #876B53 100%);
  background-clip: text;
}

.the-right-box1-1 img {
  width: 98px;
  height: 68px;
}

.the-right-box1-2 {
  color: rgba(245, 210, 181, 0.50);
  font-size: 11px;
  font-weight: 400;
}

.the-right-box2 {
  background: white;
  padding: 32px 24px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.the-right-box3 {
  background: white;
  padding: 32px 24px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.the-right-box2-left {
  display: flex;
  gap: 16px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  align-items: center;
}

.the-right-box2-left img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.the-right-box2-right {
  cursor: pointer;
  color: #3C6CFF;
  font-size: 14px;
  font-weight: 400;
}

.paper-container {
  background: white;
  border-radius: 12px;
  display: flex;
  gap: 16px;
  flex-direction: column;
}

.paper-container-item {
  border-bottom: 3px solid #FAFAFA;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.paper-container-item .one {
  display: flex;
  gap: 40px;
  align-items: center;
  width: 800px;
  justify-content: space-between;
}

.paper-container-item .one .one-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.paper-container-item .one .one-left img {
  width: 32px;
}

.paperName {
  font-size: 18px;
  font-weight: bolder;
  color: transparent;
  background-image: linear-gradient(180deg, #FFA500 35%, #FFD700 50%, #FFA500 65%);
  background-clip: text;
  animation: blink 2.5s infinite linear;

  text-shadow: 0 0 4px #FFD700;
}

@keyframes blink {
  0% {
    background-position: 0 0;
    text-shadow: 0 0 4px #FFA500;
  }
  50% {
    text-shadow: 0 0 4px #FFD700;
  }
  100% {
    background-position: 0px 100px;
    text-shadow: 0 0 4px #FFA500;
  }
}

.one-right {
  width: 200px;
}

.tree-content {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.chapterWrap {
  width: 380px;
}

.chapter-2 {
  width: 120px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.chapter-3 {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.chapter-4 {
  width: 250px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.btn-solid {
  --el-color-primary: #3C6CFF;
}

::v-deep(.el-tree-node__content) {
  height: 40px;
  line-height: 40px;
}

.is-random {
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

.is-random ::v-deep(.container) {
  width: 100%;
}

.is-random-btns {
  text-align: right;
  padding: 16px;
}

.the-right-box4 {
  background: white;
  padding: 32px 24px;
  border-radius: 12px;

}

.the-right-box4 .rank-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.the-right-box4 .rank-list .rank-select {
  width: 120px;
}

.every-day-practice {
  cursor: pointer;
  color: var(--blue_n);
}

.weekRankData-container {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.weekRankData-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.weekRankData-item-header {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.activeBtn {
  background: #ffa417;
  box-shadow: 0 .25rem .42rem 0 #ffcb7a;
  border: none;
}
.radius-12 {
  border-radius: 12px;

  box-shadow: 0px 4px 20.4px 0px rgba(60, 108, 255, 0.11);
  box-sizing: border-box;
  position: relative;
  padding: 16px 16px 0px 16px;
}

.radius-12 + .radius-12 {
  margin-top: 26px;
}

.b {
  width: 335px;
  height: 300px;
  background: white;
}

.top-left-tip {
  position: absolute;
  top: 0;
  left: 0;
  background: #E8EFFF;
  color: #3C6CFF;

}

.class-name {
  color: #333;
  font-size: 17.438px;
  font-weight: 700;
  line-height: 25px;
}

.class-info {
  color: #888;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  word-break: break-all;
  min-height: 100px;
}

.class-info img {
  width: 200px;
  height: 125px;
}

.price-and-btn {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-and-btn .tabs {
  flex: 1;
  padding-right: 16px;
}

.price-and-btn .tabs .tab {
  padding: 3px;
  background-image: linear-gradient(90deg, #CDD9FF 0%, #E9F6FF 100%);
}

.price {
  font-weight: 400;
  font-size: 24px;
}

.unit, .price {
  color: red;
}

</style>
